<template>
<div id="userRole">
    <Modal v-model="user.userRoleModalSta" title="角色设置" :loading="loading" @on-ok="userRoleOk">
        <Row>
            <Col :span="20">
            <Form ref="userRoleForm" label-position="right" :label-width="100">
                <FormItem>
                    <CheckboxGroup v-model="user.userRoleSta">
                        <div v-for="(roleList,index) in role.roleListSta" :key="index">
                            <Checkbox :label="roleList.id">
                                <span>{{roleList.name}}</span>
                            </Checkbox>
                        </div>
                    </CheckboxGroup>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue';
import {
    Modal,
    Row,
    Col,
    Form,
    FormItem,
    CheckboxGroup,
    Checkbox,
    Message
} from 'iview'
Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations,
    mapActions
} from 'vuex'
export default {
    name: 'UserRole',
    data() {
        return {
            loading: true
        };
    },
    created() {
        this.roleListAct(); //初始化角色列表
    },
    mounted() {},
    computed: {
        ...mapState({
            user: state => state.user, //vuex用户
            role: state => state.role //vuex角色
        })
    },
    methods: {
        ...mapMutations([
            'userRoleModalMut'
        ]),
        ...mapActions([
            'roleListAct'
        ]),
        //提交
        userRoleOk() {
            let _self = this;
            setTimeout(() => {
                let obj = this.$qs.stringify({
                    userId: this.user.userIdSta,
                    roles: this.user.userRoleSta
                });
                this.$axios.post('/acl_user/editUserRoles', obj).then(res => {
                    let state = res.data;
                    if (state) {
                        _self.userRoleModalMut({
                            state: false
                        }); //关闭模态框
                    } else {
                        _self.$Message.error('数据库更新失败，请重新提交');
                    }
                })
                //动画
                this.loading = false;
                this.$nextTick(() => {
                    this.loading = true;
                });
            }, 2000);
        }
    },
    components: {
        Modal,
        Row,
        Col,
        Form,
        FormItem,
        CheckboxGroup,
        Checkbox,
        Message
    }
}
</script>
